<!-- 站点管理 -->
<template>
  <div class="siteManage">
    <div class="siteInfo">
      <span>省份：{{row.province}}</span>
      <span>城市：{{row.city}}</span>
      <span>线路：{{row.railName}}</span>
    </div>
    <p>已添加的站点</p>
    <table-list
      style="width:400px"
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="false"
    ></table-list>
    <el-form :model="searchForm" style="width:400px">
      <p>添加站点</p>
      <el-form-item>
        <el-input v-model="searchForm.siteName" placeholder="站点名称">
          <el-button slot="append" type="primary" @click="addSite">添加</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$router.go(-1)">确定</el-button>
        <el-button type="primary" @click="$router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "./tableList";
export default {
  name: "siteManage",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      row: {},
      searchForm: {
        siteName: ""
      },
      tableInfos: [
        { label: "站点名称", prop: "siteName" },
        { label: "操作", prop: "changeBtn" }
      ],
      tableChangeBtns: [{ label: "删除", type: "dele", fn: this.deleteItem }],
      tableData: []
    };
  },
  methods: {
    addSite() {
      let siteName = this.searchForm.siteName;
      if (!siteName) {
        this.$message.error("添加失败！请输入站点");
        return;
      }
      let hasSite = this.tableData.some(list => {
        return list.siteName == siteName;
      });
      if (hasSite) {
        this.$message.error("添加失败！站点名称重复");
        return;
      }
      let params = { siteName: siteName, railId: this.row.railId };
      this.$axios
        .post("/city/sysCityRailway/addCityRailwaySite", params)
        .then(res => {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.searchForm.siteName = '';
          this.searchList();
        });
    },
    //删除
    deleteItem(type, idx) {
      this.$confirm(`请确认该地铁站点没有楼盘正在使用`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let params = {
            id: this.tableData[idx].id,
          };
          this.$axios
            .post("/city/sysCityRailway/deleteCityRailwaySite", params)
            .then(res => {
              this.tableData.splice(idx, 1);
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.searchList();
            });
        })
        .catch(() => {});
    },

    searchList(pageNum) {
      this.$axios
        .get("/city/sysCityRailway/getCityRailwaySite?railId=" + this.row.railId)
        .then(res => {
          this.tableData = res.siteList;
        });
    }
  },
  created() {
    this.row = this.$route.query.row;
    this.searchList();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.siteInfo >span{
  margin-right :40px;
}
.siteManage {
}
</style>
